<template>
	<view class="">
		<view class="weather-container">

		</view>
		<view class="updateBox w100" v-if="this.updateTips">
			为您更新了10条数据
		</view>
		<view v-for="(item,index) in newsList" :key="index">
			<news-card :mode="item.mode" :title="item.title" :from="item.from" :num="item.num" :time="item.time"
				:isTop="item.isTop" :imageList="item.imageList">
				<template v-slot:tips>
					<view class="search-container" v-if="item.showSearch">
						<text style="margin-right: 5px;">搜索:</text>
						<view class="search-item">
							好物推荐
						</view>
						<view class="search-item">
							精选好物
						</view>
					</view>
				</template>
			</news-card>
		</view>
	</view>
</template>

<script>
	import newsData from '../../data/news.json'
	import newsCard from '../../components/newsCard.vue';
	export default {
		components: {
			newsCard
		},
		data() {
			return {
				newsList: [],
				count: 10,
				updateTips: false,
			}
		},
		onLoad() {
			// console.log('onload');
			// this.newsList = getApp().globalData.dataList;
			this.newsList = newsData.newsList
			console.log('onload' + this.newsList);
		},
		onPullDownRefresh() {
			// 他会一直刷新，不会自己停
			console.log("onPullDownRefresh 开始刷新");
			this.updateTips = true
			// 网络请求
			setTimeout(() => {
				this.updateTips = false
				uni.stopPullDownRefresh()
				console.log("stopPullDownRefresh 数据刷新完了");
			}, 2000)
		},
		onReachBottom() {
			// 数据再次加载
			console.log("onReachBottom");
			if (this.count < 100)
				this.count = this.count + 10
		},
		methods: {
			// tode：后面绑定一个tab图标，实现点击刷新效果
			refresh() {
				uni.startPullDownRefresh({
					success() {
						console.log('startPullDownRefresh--->success');
					},
					fail() {
						console.log('startPullDownRefresh--->fail');
					},
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: whitesmoke;
	}
	.weather-container{
		
	}

	.search-container {
		margin-top: 10px;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: dodgerblue;

		.search-item {
			border: 1px solid dodgerblue;
			border-radius: 10px;
			padding: 2px;
			margin-right: 5px;
		}
	}


	.updateBox {
		background-color: orange;
		color: white;
		font-size: 14px;
		padding: 5px;
	}
</style>